<template>
  <div class="dashboard-container">
    <!-- 简单的顶部导航 -->
    <div class="top-nav">
      <div class="nav-content">
        <div class="nav-brand">
          <h2>智能办公平台 <span class="brand-accent">AI Office</span></h2>
        </div>
        <div class="nav-actions">
          <el-button type="text" @click="goToOtherPages">进入工作台</el-button>
          <el-dropdown @command="handleUserAction">
            <span class="user-info">
              <el-avatar size="small" :src="userAvatar"></el-avatar>
              <span>{{ userName }}</span>
              <i class="el-icon-arrow-down"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人信息</el-dropdown-item>
              <el-dropdown-item command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
    </div>

    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1 class="welcome-title">
            智能办公平台
            <span class="tech-accent">AI Office</span>
          </h1>
          <p class="welcome-subtitle">
            提升效率，智享未来 - 您的专属智能办公助手
          </p>
          <div class="stats-overview">
            <div class="stat-item" v-for="(stat, index) in quickStats" :key="index">
              <div class="stat-number">{{ stat.value }}</div>
              <div class="stat-label">{{ stat.label }}</div>
            </div>
          </div>
        </div>
        <div class="welcome-visual">
          <div class="floating-elements">
            <div class="element element-1"></div>
            <div class="element element-2"></div>
            <div class="element element-3"></div>
            <div class="element element-4"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 服务功能区域 -->
    <div class="services-section">
      <div class="section-header">
        <h2 class="section-title">智能服务中心</h2>
        <p class="section-subtitle">全方位智能办公解决方案</p>
      </div>

      <div class="services-grid">
        <div
          class="service-card"
          v-for="(service, index) in services"
          :key="index"
          :class="{ 'featured': service.featured }"
          @click="handleServiceClick(service)"
        >
          <div class="service-icon">
            <i :class="service.icon"></i>
          </div>
          <div class="service-content">
            <h3 class="service-title">{{ service.title }}</h3>
            <p class="service-desc">{{ service.description }}</p>
            <div class="service-stats">
              <span class="usage-count">{{ service.usage }}次使用</span>
              <span class="status-indicator" :class="service.status"></span>
            </div>
          </div>
          <div class="service-action">
            <el-button type="text" class="action-btn">
              立即使用 <i class="el-icon-arrow-right"></i>
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 数据仪表板区域 -->
    <div class="dashboard-section">
      <div class="section-header">
        <h2 class="section-title">数据洞察</h2>
        <div class="dashboard-controls">
          <el-radio-group v-model="chartPeriod" size="small">
            <el-radio-button label="today">今日</el-radio-button>
            <el-radio-button label="week">本周</el-radio-button>
            <el-radio-button label="month">本月</el-radio-button>
          </el-radio-group>
        </div>
      </div>

      <el-row :gutter="24" class="dashboard-row">
        <!-- 统计卡片 -->
        <el-col :span="6" v-for="(card, index) in enhancedCardData" :key="index">
          <div class="metric-card" @click="handleCardClick(card)">
            <div class="metric-header">
              <div class="metric-icon" :style="{ background: card.gradient }">
                <i :class="card.icon"></i>
              </div>
              <div class="metric-trend" :class="card.trend">
                <i :class="card.trendIcon"></i>
                <span>{{ card.trendValue }}</span>
              </div>
            </div>
            <div class="metric-content">
              <div class="metric-value">{{ card.number }}</div>
              <div class="metric-label">{{ card.title }}</div>
              <div class="metric-progress">
                <div class="progress-bar" :style="{ width: card.progress + '%', background: card.gradient }"></div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 图表区域 -->
      <el-row :gutter="24" class="chart-section">
        <el-col :span="16">
          <div class="chart-container">
            <div class="chart-header">
              <h3>工作效率趋势</h3>
              <el-switch
                v-model="realTimeMode"
                active-text="实时模式"
                inactive-text="静态模式"
                active-color="#00d4aa"
              ></el-switch>
            </div>
            <div ref="trendChart" class="chart-box"></div>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="chart-container">
            <div class="chart-header">
              <h3>服务使用分布</h3>
            </div>
            <div ref="distributionChart" class="chart-box"></div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 快速访问区域 -->
    <div class="quick-access-section">
      <div class="section-header">
        <h2 class="section-title">最近使用</h2>
        <el-button type="text" class="view-all-btn" @click="viewAllRecent">
          查看全部 <i class="el-icon-arrow-right"></i>
        </el-button>
      </div>

      <div class="recent-items">
        <div
          class="recent-item"
          v-for="(item, index) in recentItems"
          :key="index"
          @click="handleRecentClick(item)"
        >
          <div class="item-preview">
            <div class="item-icon" :style="{ background: item.color }">
              <i :class="item.icon"></i>
            </div>
          </div>
          <div class="item-info">
            <h4 class="item-title">{{ item.title }}</h4>
            <p class="item-desc">{{ item.description }}</p>
            <div class="item-meta">
              <span class="item-time">{{ item.time }}</span>
              <span class="item-type">{{ item.type }}</span>
            </div>
          </div>
          <div class="item-actions">
            <el-button size="mini" type="text" icon="el-icon-view">查看</el-button>
            <el-button size="mini" type="text" icon="el-icon-edit">编辑</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'Dashboard',
  data() {
    return {
      userName: this.$store.getters.nickName,
      userAvatar: this.$store.getters.avatar,
      chartPeriod: 'week',
      realTimeMode: false,
      quickStats: [
        { label: '今日处理', value: '24' },
        { label: '效率提升', value: '32%' },
        { label: '节省时间', value: '2.5h' },
        { label: '团队协作', value: '8人' }
      ],
      services: [
        {
          title: '智能文档处理',
          path: '/office/search',
          description: 'AI驱动的文档编辑、格式化和智能批注',
          icon: 'el-icon-file',
          usage: 1250,
          status: 'active',
          featured: true
        },
        {
          title: '智能日程管理',
          path: '/office/dates',
          description: '自动安排会议，智能提醒重要事项',
          icon: 'el-icon-date',
          usage: 890,
          status: 'active'
        },
        {
          title: '智能会议助手',
          path: '/office/meeting',
          description: '自动记录会议纪要，生成任务清单',
          icon: 'el-icon-video-camera',
          usage: 645,
          status: 'active'
        },
        {
          title: '智能合同助手',
          description: '合同条款分析，风险评估和建议',
          icon: 'el-icon-files',
          usage: 423,
          status: 'active'
        },
        {
          title: '知识检索管理',
          path: '/office/KnowledgeBase',
          description: '企业知识库智能搜索和管理',
          icon: 'el-icon-search',
          usage: 789,
          status: 'active'
        },
        {
          title: '团队协作平台',
          path: '/office/first',
          description: '实时协作，项目管理和进度跟踪',
          icon: 'el-icon-user',
          usage: 567,
          status: 'active'
        }
      ],
      enhancedCardData: [
        {
          title: '总文档数',
          icon: 'el-icon-file',
          number: 25,
          gradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          trend: 'up',
          trendIcon: 'el-icon-top',
          trendValue: '+12%',
          progress: 75
        },
        {
          title: '共享文档',
          icon: 'el-icon-share',
          number: 18,
          gradient: 'linear-gradient(135deg, #00d4aa 0%, #4fd1c7 100%)',
          trend: 'up',
          trendIcon: 'el-icon-top',
          trendValue: '+8%',
          progress: 68
        },
        {
          title: '收藏文档',
          icon: 'el-icon-star-on',
          number: 7,
          gradient: 'linear-gradient(135deg, #ffa726 0%, #ffcc02 100%)',
          trend: 'down',
          trendIcon: 'el-icon-bottom',
          trendValue: '-3%',
          progress: 45
        },
        {
          title: '最近更新',
          icon: 'el-icon-refresh',
          number: 4,
          gradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          trend: 'up',
          trendIcon: 'el-icon-top',
          trendValue: '+15%',
          progress: 82
        }
      ],
      recentItems: [
        {
          title: '2024年第一季度报告',
          description: '财务分析和业务总结报告',
          time: '2小时前',
          type: '文档',
          icon: 'el-icon-file',
          color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)'
        },
        {
          title: '产品发布会议纪要',
          description: '新产品发布策略讨论会议记录',
          time: '4小时前',
          type: '会议',
          icon: 'el-icon-video-camera',
          color: 'linear-gradient(135deg, #00d4aa 0%, #4fd1c7 100%)'
        },
        {
          title: '服务合同条款分析',
          description: '客户服务合同风险评估报告',
          time: '1天前',
          type: '合同',
          icon: 'el-icon-files',
          color: 'linear-gradient(135deg, #ffa726 0%, #ffcc02 100%)'
        }
      ],
      date: [5, 20, 36, 10, 10, 20, 11],
      distributionData: [
        { value: 35, name: '文档处理' },
        { value: 25, name: '日程管理' },
        { value: 20, name: '会议助手' },
        { value: 12, name: '合同助手' },
        { value: 8, name: '知识检索' }
      ]
    };
  },
  mounted() {
    this.renderTrendChart();
    this.renderDistributionChart();
    this.startRealTimeUpdates();
    this.loadUserInfo();
  },
  beforeDestroy() {
    if (this.updateTimer) {
      clearInterval(this.updateTimer);
    }
  },
  methods: {
    loadUserInfo() {
      // 模拟加载用户信息
      const userInfo = sessionStorage.getItem('userInfo');
      if (userInfo) {
        const user = JSON.parse(userInfo);
        this.userName = user.name || '用户';
        this.userAvatar = user.avatar || '';
      }
    },
    goToOtherPages() {
      // 跳转到工作台（包含导航的页面）
      this.$router.push('/office/meeting');
    },
    handleUserAction(command) {
      if (command === 'logout') {
        this.$confirm('确定要退出登录吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          sessionStorage.clear();
          this.$router.push('/login');
        });
      } else if (command === 'profile') {
        this.$router.push('/office/profile');
      }
    },
    handleServiceClick(service) {
      // this.$message.success(`即将打开 ${service.title}`);
      this.$router.push(service.path).catch(()=>{
      })
    },
    handleCardClick(card) {
      this.$message.info(`查看 ${card.title} 详细信息`);
    },
    handleRecentClick(item) {
      this.$message.success(`打开 ${item.title}`);
    },
    viewAllRecent() {
      this.$message.info('查看全部最近使用项目');
    },
    startRealTimeUpdates() {
      this.updateTimer = setInterval(() => {
        if (this.realTimeMode) {
          this.updateChartData();
        }
      }, 3000);
    },
    updateChartData() {
      // 模拟实时数据更新
      this.date = this.date.map(() => Math.floor(Math.random() * 40) + 5);
      this.renderTrendChart();
    },
    renderTrendChart() {
      const chartDom = this.$refs.trendChart;
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);

      const option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#e2e8f0',
          borderWidth: 1,
          textStyle: { color: '#4a5568' },
          axisPointer: {
            type: 'cross',
            lineStyle: { color: '#667eea', width: 1, type: 'dashed' }
          }
        },
        grid: {
          top: '5%',
          bottom: '10%',
          left: '3%',
          right: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          axisLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            color: '#8b9dc3',
            fontSize: 12
          }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: {
            lineStyle: {
              color: 'rgba(139, 157, 195, 0.2)',
              type: 'dashed'
            }
          },
          axisLabel: {
            color: '#8b9dc3',
            fontSize: 12
          }
        },
        series: [
          {
            name: '工作效率',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              width: 3,
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: '#667eea' },
                { offset: 1, color: '#764ba2' }
              ])
            },
            itemStyle: {
              color: '#667eea',
              borderColor: '#fff',
              borderWidth: 2
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(102, 126, 234, 0.2)' },
                { offset: 1, color: 'rgba(102, 126, 234, 0.05)' }
              ])
            },
            data: this.date,
            emphasis: {
              focus: 'series',
              itemStyle: {
                shadowBlur: 10,
                shadowColor: 'rgba(102, 126, 234, 0.5)'
              }
            }
          }
        ],
        animationDuration: 1500,
        animationEasing: 'cubicOut'
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => myChart.resize());
    },
    renderDistributionChart() {
      const chartDom = this.$refs.distributionChart;
      if (!chartDom) return;

      const myChart = echarts.init(chartDom);

      const colors = [
        'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        'linear-gradient(135deg, #00d4aa 0%, #4fd1c7 100%)',
        'linear-gradient(135deg, #ffa726 0%, #ffcc02 100%)',
        'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
        'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
      ];

      const option = {
        tooltip: {
          trigger: 'item',
          backgroundColor: 'rgba(255,255,255,0.95)',
          borderColor: '#e2e8f0',
          borderWidth: 1,
          textStyle: { color: '#4a5568' }
        },
        series: [
          {
            name: '使用分布',
            type: 'pie',
            radius: ['45%', '75%'],
            center: ['50%', '55%'],
            data: this.distributionData,
            itemStyle: {
              borderRadius: 8,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              position: 'outside',
              formatter: '{b}: {d}%',
              fontSize: 12,
              color: '#4a5568'
            },
            labelLine: {
              length: 15,
              length2: 10,
              lineStyle: { color: '#dfe6ec' }
            },
            emphasis: {
              scale: true,
              itemStyle: {
                shadowBlur: 15,
                shadowColor: 'rgba(0,0,0,0.2)'
              }
            }
          }
        ],
        color: colors,
        animationDuration: 1500
      };

      myChart.setOption(option);
      window.addEventListener('resize', () => myChart.resize());
    }
  }
};
</script>

<style scoped>
.dashboard-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 0;
}

/* 顶部导航 */
.top-nav {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 40px;
}

.nav-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-brand h2 {
  margin: 0;
  color: #2d3748;
  font-size: 1.5rem;
  font-weight: 600;
}

.brand-accent {
  background: linear-gradient(45deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: #4a5568;
  font-weight: 500;
  transition: color 0.3s ease;
}

.user-info:hover {
  color: #667eea;
}

/* 欢迎区域 */
.welcome-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 80px 40px;
  color: white;
  position: relative;
  overflow: hidden;
}

.welcome-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.welcome-text {
  flex: 1;
}

.welcome-title {
  font-size: 3.5rem;
  font-weight: 700;
  margin: 0 0 16px 0;
  line-height: 1.2;
}

.tech-accent {
  background: linear-gradient(45deg, #00d4aa, #4fd1c7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
}

.welcome-subtitle {
  font-size: 1.25rem;
  opacity: 0.9;
  margin: 0 0 40px 0;
  font-weight: 300;
}

.stats-overview {
  display: flex;
  gap: 40px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #00d4aa;
  line-height: 1;
}

.stat-label {
  font-size: 0.9rem;
  opacity: 0.8;
  margin-top: 4px;
}

.welcome-visual {
  flex: 1;
  position: relative;
  height: 300px;
}

.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.element {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.element-1 {
  width: 120px;
  height: 120px;
  top: 20%;
  right: 10%;
  animation: float1 6s ease-in-out infinite;
}

.element-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 30%;
  animation: float2 8s ease-in-out infinite;
}

.element-3 {
  width: 60px;
  height: 60px;
  top: 80%;
  right: 50%;
  animation: float3 10s ease-in-out infinite;
}

.element-4 {
  width: 40px;
  height: 40px;
  top: 30%;
  right: 70%;
  animation: float4 7s ease-in-out infinite;
}

@keyframes float1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes float2 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(-180deg); }
}

@keyframes float3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(360deg); }
}

@keyframes float4 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-25px) rotate(-360deg); }
}

/* 服务区域 */
.services-section {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  margin: 0 0 16px 0;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #718096;
  margin: 0;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 24px;
}

.service-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.service-card:hover::before {
  transform: scaleX(1);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

.service-card.featured {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.service-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(102, 126, 234, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.service-card.featured .service-icon {
  background: rgba(255, 255, 255, 0.2);
}

.service-card:hover .service-icon {
  transform: scale(1.1);
}

.service-icon i {
  font-size: 24px;
  color: #667eea;
}

.service-card.featured .service-icon i {
  color: white;
}

.service-title {
  font-size: 1.4rem;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #2d3748;
}

.service-card.featured .service-title {
  color: white;
}

.service-desc {
  color: #718096;
  margin: 0 0 20px 0;
  line-height: 1.6;
}

.service-card.featured .service-desc {
  color: rgba(255, 255, 255, 0.9);
}

.service-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.usage-count {
  font-size: 0.9rem;
  color: #a0aec0;
}

.service-card.featured .usage-count {
  color: rgba(255, 255, 255, 0.8);
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d4aa;
}

.action-btn {
  color: #667eea;
  font-weight: 500;
  padding: 0;
}

.service-card.featured .action-btn {
  color: white;
}

/* 仪表板区域 */
.dashboard-section {
  padding: 60px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.dashboard-controls {
  display: flex;
  gap: 16px;
}

.dashboard-row {
  margin-bottom: 40px;
}

.metric-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
  height: 160px;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.metric-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.metric-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.metric-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  font-weight: 600;
}

.metric-trend.up {
  color: #00d4aa;
}

.metric-trend.down {
  color: #f56565;
}

.metric-value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #2d3748;
  line-height: 1;
  margin-bottom: 8px;
}

.metric-label {
  color: #718096;
  font-size: 0.9rem;
  margin-bottom: 12px;
}

.metric-progress {
  height: 4px;
  background: #e2e8f0;
  border-radius: 2px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* 图表区域 */
.chart-section {
  margin-top: 40px;
}

.chart-container {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  height: 400px;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-header h3 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0;
}

.chart-box {
  height: 320px;
}

/* 快速访问区域 */
.quick-access-section {
  padding: 60px 40px 80px;
  max-width: 1200px;
  margin: 0 auto;
}

.view-all-btn {
  color: #667eea;
  font-weight: 500;
}

.recent-items {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.recent-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.recent-item:hover {
  transform: translateX(8px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.item-preview {
  flex-shrink: 0;
}

.item-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.item-info {
  flex: 1;
}

.item-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2d3748;
  margin: 0 0 8px 0;
}

.item-desc {
  color: #718096;
  margin: 0 0 8px 0;
  line-height: 1.5;
}

.item-meta {
  display: flex;
  gap: 16px;
}

.item-time,
.item-type {
  font-size: 0.8rem;
  color: #a0aec0;
}

.item-actions {
  display: flex;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .top-nav {
    padding: 0 20px;
  }

  .nav-content {
    flex-direction: column;
    height: auto;
    padding: 15px 0;
    gap: 15px;
  }

  .welcome-content {
    flex-direction: column;
    text-align: center;
  }

  .welcome-title {
    font-size: 2.5rem;
  }

  .stats-overview {
    justify-content: center;
    gap: 20px;
  }

  .services-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-section,
  .services-section,
  .quick-access-section {
    padding: 40px 20px;
  }

  .chart-section {
    flex-direction: column;
  }

  .chart-section .el-col {
    margin-bottom: 20px;
  }
}
</style>
